<template>
  <div id="list">
    <a-card class="sel">
      <a-row :gutter="16">
        <a-col> 人员搜索: </a-col>
        <a-col>
          <a-input
            :value="selname"
            placeholder="请输入"
            @change="(e) => (selname = e.target.value)"
          ></a-input
        ></a-col>
        <a-col :span="6">
          <a-button type="primary" @click="getData">
            <template #icon> <SearchOutlined /> </template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <!-- 表格区域 -->
    <a-card class="table" :style="{ margin: '10px 0' }">
      <a-button
        type="primary"
        @click="
          action = true;
          classAction = true;
        "
        >新建</a-button
      >
      <a-table :columns="columns" :dataSource="tableData" bordered>
        <template #region="{ record }">
          {{ record.region && record.region[0]["name"] }}
        </template>
        <template #role="{ record }">
          {{ record.role ? "运营员" : "维修员" }}
        </template>
        <template #action="{ record }">
          <a
            @click="
              action = true;
              formName = '编辑人员';
              formData = { ...record };
              formData.region = record.region[0]['_id'];
              classAction = false;
            "
            >修改</a
          >
          <a-divider type="vertical" />
          <a @click="deletePersonnel({ _id: record._id }); getData()">删除</a>
        </template>
      </a-table>
    </a-card>
    <!-- 添加表单 -->
    <add-list
      :formName="formName"
      :formData="formData"
      :action="action"
      :classAction="classAction"
      @setAction="
        () => {
          action = false;
          formData = {};
          getData()
        }
      "
      @setForm="(e) => (formData = e)"
      @setUpload="(e) => (formData.head = e)"
    ></add-list>
  </div>
</template>
<script>
// 导入表单组件
import addList from "./addList.vue";
import { getPersonnel, deletePersonnel } from "@/api/personnel";
import { SearchOutlined } from "@ant-design/icons-vue";
import { onMounted, onUpdated, reactive, ref, toRefs } from "vue";
export default {
  components: { addList, SearchOutlined },
  setup() {
    let content = reactive({
      columns: [
        {
          title: "序号",
          key: "index",
          customRender: (text, record, index) => {
            return text.index + 1;
          },
        },
        {
          title: "人员姓名",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "归属地区",
          key: "region",
          slots: {
            customRender: "region",
          },
        },
        {
          title: "角色",
          key: "role",
          slots: {
            customRender: "role",
          },
        },
        {
          title: "联系电话",
          key: "phone",
          dataIndex: "phone",
        },
        {
          title: "操作",
          key: "action",
          slots: {
            customRender: "action",
          },
        },
      ],
      formData: {
        name: "",
        role: "",
        phone: "",
        region: "",
        head: "",
        status: false,
      },
      tableData: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
    });
    // 表单控制项
    let formName = ref("新增人员");
    let action = ref(false);
    let classAction = ref(); // 为true代表是添加，为false代表是修改
    let selname = ref("");
    // 这是获取数据的方法
    let getData = async () => {
      let {
        data: { data },
      } = await getPersonnel({ page: 1, limit: 10, name: selname.value });
      content.tableData = data;
    };
    onMounted(() => {
      getData();
    });

    return {
      ...toRefs(content),
      formName,
      selname,
      action,
      classAction,
      getPersonnel,
      deletePersonnel,
      getData,
    };
  },
};
</script>
<style lang="scss" scoped>
</style>